<template>
  <div class="employees-container">
    <div class
    ="app-container">

      <el-card>

     <el-form>
       <div class="filter-container">
          <el-row style=" margin-bottom = 25px ">

            <el-col :span="18">
                <el-form-item label="关键词：" prop="tags">
                  <el-input
                  v-model="keyword"
                    style="width: 180px;"
                    placeholder="请输入"
                    class="filter-item"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6" style="text-align:right">
                <el-form-item>
                  <el-button
                     @click="clearrole"
                    size="small"
                  >
                  清除
                  </el-button>

                  <el-button
                  size="small"
                  type="primary"
                   @click="searchrole"
                  >
                  搜索
                  </el-button>

                </el-form-item>
              </el-col>

         </el-row>
        </div>
   </el-form>

       <!-- 数据记录 -->
        <el-alert
          :title="`数据一共有${total}条`"
           style="margin-bottom:15px"
          type="info"
          class="alert"
          show-icon
        ></el-alert>

        <el-table  :data="list" style="width: 100%">
          <el-table-column label="编号"  prop="id" />
          <el-table-column label="题型">

             <template slot-scope="scope">
              <!-- {{scope.row.questionType === 1? '单选':'多选'}} -->
              {{ questionType.find(item => item.value === +scope.row.questionType).label }}
            </template>
          </el-table-column>

          <el-table-column label="题目编号" width="200px" prop="questionIDs">
            <template slot-scope="scope">
              <el-link type="primary" v-for="item in scope.row.questionIDs" :key="item.number"  @click="isShowDialog=true">{{item.number}}</el-link>
            </template>
            </el-table-column>

          <el-table-column label="录入时间" prop="addTime">
            </el-table-column>

          <el-table-column label="答题时间(s)" prop="totalSeconds"  />
          <el-table-column label="正确率(%)" prop="accuracyRate"  />
          <el-table-column label="录入人" prop="userName"  />

                    <!-- 操作 -->
          <el-table-column label="操作"  fixed="right" width="280"  align="center">
                    <template #default="{ row }">
             <el-button type="danger" icon="el-icon-delete" circle @click="delrole(row)"></el-button>
                   </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px ">
          <el-pagination
          background
          :current-page="page"
          :page-sizes="[20]"
          :page-size="pagesize"
          layout="->,prev, pager,next, sizes,jumper"
          :total="total"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
/>
        </div>

      </el-card>

   <!-- 弹窗组件 -->
 <el-dialog
        title="题目预览"
        :visible.sync="isShowDialog"
        >

        <el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">【题型】:单选题</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">【编号】:25</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">【难度】:困难</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">【标签】:随机</div></el-col>
</el-row>
  <el-row :gutter="20" style="margin-top:20px">
   <el-col :span="6"><div class="grid-content bg-purple">【学科】:后端</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">【目录】:java基础</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">【方向】:企业服务</div></el-col>
</el-row>
      <hr style="margin-top:20px">

<el-row :gutter="20" style="margin-top:20px">
<div>【题干】:</div>

      <div>
         <el-col style="margin-top:10px">
        <span style="color:blue">河北在谁旁边</span>
        </el-col>
      </div>

         <el-col style="margin-top:10px;margin-bottom:10px">
        <span>多选题 选项 : (以下选中的选中为正确答案)</span>
        </el-col>

      <el-col type="flex">
         <el-checkbox v-model="checked" style="padding-top:3px">上海</el-checkbox> <br>
         <el-checkbox style="padding-top:3px">苏州</el-checkbox><br>
         <el-checkbox style="padding-top:3px">河北</el-checkbox><br>
         <el-checkbox style="padding-top:3px">天津</el-checkbox>
     </el-col>
</el-row>

<hr style="margin-top:20px">

<el-row :gutter="20" style="margin-top:20px">
    【参考答案】: <el-button type="danger" @click="playvideo">视频展示预览</el-button>
    <br>
     <video
     style="width:400px; height:400px"
     v-if="showvideo"
     :src="src"
     >

     </video>

</el-row>

<hr style="margin-top:20px">
<el-row :gutter="20" style="margin-top:20px">
 【答案解析】: http://cn.vuejs.org/ 有答案
</el-row>
<hr style="margin-top:20px">
<el-row :gutter="20" style="margin-top:20px">
 【题目备注】: http://cn.vuejs.org/ 有答案
</el-row>

 <span slot="footer" class="dialog-footer">
     <el-button @click="isShowDialog = false" type="primary">取 消</el-button>
  </span>

      </el-dialog>

  <!-- <questions-preview :show-dialog.sync="isshowDialog" ref="Dialog"></questions-preview> -->
    </div>
  </div>
</template>

<script>

import { randoms, removeRandoms } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
// import QuestionsPreview from '../components/questions-preview.vue'

export default {
  name: 'Questionsrandoms',
  // components: {
  //   QuestionsPreview
  // },
  data () {
    return {
      src: 'http://45.252.224.197/mp4files/213200000CEAE47B/v.itheima.com/dc/xkdh/n12donghua.mp4',
      checked: '',
      showvideo: false,
      isShowDialog: false,
      keyword: '',
      list: [],
      page: 1, // 当前页,
      pagesize: 10, // 每页条数
      total: 0, // 总条数
      questionType
    }
  },
  created () {
    this.getList() // 获取角色列表
  },
  methods: {
    async getList () {
      const { data } = await randoms({ page: this.page, pagesize: this.pagesize, keyword: this.keyword })
      // const { total, rows } = items
      // this.total = total
      this.list = data.items
      this.total = data.counts
      console.log(data.items)
    },

    // 修改了每页条数后, 会造成页数的变化, 推荐从第一页重新开始展示
    // 改变尺码
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      // 更新每页条数
      this.pagesize = val
      // 重置当前页
      this.page = 1
      // 调用方法, 重新请求
      this.getList()
    },

    // 分页方法
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      // 更新当前页
      this.page = val
      // 调用方法, 重新请求渲染
      this.getList()
    },

    // 删除方法
    delrole (row) {
      this.$confirm('确认要删除该角色吗?', '温馨提示').then(async () => {
        await removeRandoms(row) // 调用删除接口
        // console.log(row)
        if (this.list.length === 1 && this.page > 1) {
          this.page--
        }
        this.getList() // 重新加载数据
        // 提示信息
        this.$message.success('删除角色成功')
      }).catch(error => {
        console.log(error)
      })
    },
    clearrole () {
      // 清空关键词
      this.keyword = null
    },
    // 搜索
    searchrole () {
      this.page = 1
      this.getList()
    },
    playvideo () {
      this.showvideo = true
    }

  }

}
</script>

<style>

</style>
